<template>
  <div class="app-container" ref="appContainer">
    <!-- <div class="header">
        <el-form :inline="true" class="search-form" :model="inputSearch" ref="ruleFormRef">
          <el-form-item label="请输入用户ID">
            <el-input v-model="inputSearch.searchId" :placeholder="`请输入用户ID`" clearable />
          </el-form-item>
        </el-form>
        <div class="search">
          <el-button type="primary" @click="onclickSearch" :icon="Search">搜索</el-button>
        </div>
      </div> -->

    <!-- ------------表格--------------->
    <div class="table">
      <el-table v-loading="loading" :data="list" fit highlight-current-row style="width: 100%" :border="true">
        <el-table-column label="联盟ID" align="center" prop="groupid" width="125px">
        </el-table-column>

        <el-table-column label="名称" align="center" prop="name" width="300px">
        </el-table-column>
        <el-table-column label="邀请码" align="center" prop="code" width="125px">
        </el-table-column>
        <el-table-column label="盟主id" align="center" prop="ower_id" width="125px">
        </el-table-column>
        <el-table-column label="盟主名字" align="center" prop="ower_name" width="125px">
        </el-table-column>

        <el-table-column label="盟主头像" width="90px" align="center">
          <template #default="scope">
            <el-avatar :size="80" :src="scope.row.ower_face">
              <img src="@/assets/image/userlogo.png" />
            </el-avatar>
          </template>
        </el-table-column>

        <el-table-column label="公告" align="center" prop="notice" width="100px">
        </el-table-column>
        <el-table-column label="是否需要审核" align="center" prop="isapply" width="200px">
        </el-table-column>
        <el-table-column label="联盟人数" align="center" prop="num" width="200px">
        </el-table-column>

        <el-table-column label="操作" align="center" width="500px">
          <template #default="scope">
            <!-- <el-button type="success" @click="onClickZhanji(scope.row)">查看战绩</el-button> -->
            <el-button type="success" @click="onClickMember(scope.row)">查看成员</el-button>
            <el-button type="success" @click="onClickTable(scope.row)">查看桌子</el-button>
            <el-button type="success" @click="onClickDelete(scope.row)">删除联盟</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <!-- ------------分页--------------->
    <!-- <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pagenum" :limit.sync="listQuery.pagesize"
        @pagination="getList" /> -->

    <!-- ------------分页--------------->
    <div class="pagination">
      <el-pagination v-model:currentPage="listQuery.pagenum" :page-size="listQuery.pagesize" background
        layout="total, sizes, prev, pager, next, jumper" :total="pageObj.total" @size-change="handleSizeChange"
        @current-change="getList" />
    </div>


    <el-dialog v-model="dialogVisible" title="玩家充值" width="80%">
      <el-form :model="chargeForm">

        <el-form-item label="用户ID">
          <el-input :value="chargeForm.id" disabled />
        </el-form-item>
        <el-form-item label="账号">
          <el-input :value="chargeForm.name" disabled />
        </el-form-item>
        <el-form-item label="呢称">
          <el-input :value="chargeForm.nick" disabled />
        </el-form-item>
        <el-form-item label="钻石">
          <el-input :value="chargeForm.gem" disabled />
        </el-form-item>

        <el-form-item label="选择充值类型">
          <el-radio-group v-model="chargeForm.type">
            <el-radio label="gem">钻石</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="输入充值数量(负数表示扣除)">
          <el-input v-model="chargeForm.num" type="number" clearable />
        </el-form-item>

      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleRechargeSubmit()">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>


  </div>
</template>
<script lang="ts" setup name="comprehensive">
import { Search } from '@element-plus/icons-vue'
import { computed, ref, reactive, onMounted, nextTick } from 'vue'
import * as dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { Logger } from '@/engine/util/Logger'
import { HttpClient } from '@/utils/HttpClient'
import { da, fa, ro, tr } from 'element-plus/es/locale'
import { UIHelper } from '@/utils/UIHelper'
import { GameConfig } from '@/config/GameConfig'
import { DateUtil } from '@/engine/util/DateUtil'
import { useRouter } from 'vue-router'
import { GroupInfo } from '@/store/model/GroupInfo'
import { Base64 } from 'js-base64'
const router = useRouter()
const loading = ref(true)
const appContainer = ref(null)


const inputSearch = reactive({
  searchId: '',
})

//列表查询选项
const listQuery = reactive({
  pagenum: 1, //第几页
  pagesize: 10, //一页多少个
})

let list = reactive([
  {
  }
])
let pageObj = reactive({
  total: 0
})

const dialogVisible = ref(false)
const chargeForm = reactive({
  id: 1,
  name: '',
  nick: '',
  gem: '',

  type: "gem",
  num: "0"
})



onMounted(() => {
  nextTick(() => {
    // let data = appContainer.value.
  })
  setTimeout(() => {
    loading.value = false
  }, 500)
  getList()
})


const onclickSearch = () => {
  Logger.log('onclickSearch!', inputSearch)
  // if(inputSearch.searchId ==)
  let searchId: number = parseInt(inputSearch.searchId)
  if (isNaN(searchId)) {
    // UIHelper.showMsg("请输入正常的用户id")
    getList()
  } else {
    HttpClient.get_user_info(searchId, (data: object) => {
      formatDataList(data["users"])
    })
  }
}

const handleSizeChange = (val: number) => {
  listQuery.pagesize = val
  getList()
}

const formatDataList = (dataList: Array<object>) => {
  list.splice(0)
  for (let i = 0; i < dataList.length; i++) {
    let data = {
      "groupid": dataList[i]["groupid"],
      "isapply": dataList[i]["isapply"],
      "name": dataList[i]["name"],
      "notice": dataList[i]["notice"],
      "code": dataList[i]["code"],
      "num":dataList[i]["num"],
      "ower_id":dataList[i]["ower_id"],
      "ower_face":dataList[i]["ower_face"],
      "ower_name":Base64.decode(dataList[i]["ower_name"]),
    }
    if (dataList[i]["isapply"]) {
      data["isapply"] = "需要审核"
    } else {
      data["isapply"] = "不需要审核"
    }
    list[i] = data
  }
  list.sort((a: object, b: object) => {
    return a["groupid"] - b["groupid"]
  })
}

const getList = () => {
  loading.value = true;
  HttpClient.group_list((data: object) => {
    loading.value = false
    let list: Array<object> = data["data"]
    formatDataList(list)
  })
}

const onClickZhanji=(row)=>{
  Logger.log("onClickZhanji", row)
  GroupInfo.instance.id = row.groupid
  router.push({
    path: '/router_group/group_zhanji',
  })
}

const onClickMember = (row) => {
  Logger.log("onClickMember", row)
  GroupInfo.instance.id = row.groupid
  // dialogVisible.value = true
  router.push({
    path: '/router_group/group_member',
  })
}

const onClickTable = (row)=>{
  Logger.log("onClickTable", row)
  GroupInfo.instance.id = row.groupid
  // dialogVisible.value = true
  router.push({
    path: '/router_group/group_table',
  })
}

const onClickDelete = (row)=>{
  Logger.log("onClickDelete", row)
  HttpClient.groupDiss(row.groupid, ()=>{
    getList()
  })
}

const handleRechargeSubmit = () => {
  Logger.log("handleRechargeSubmit=", chargeForm)
  let num: number = parseInt(chargeForm.num)
  if (isNaN(num)) {
    UIHelper.showMsg("请输入正确的充值数额")
  } else {
    dialogVisible.value = false
    // HttpClient.charge_by_gm(chargeForm.id, num, chargeForm.type, () => {
    //   for (let i = 0; i < list.length; i++) {
    //     if (list[i].id == chargeForm.id) {
    //       if (chargeForm.type == "gem") {
    //         list[i].gem += num
    //       }
    //     }
    //   }
    // })
  }
}



  // const getSummaries = (param) => {
  //   // const { columns, data } = param;
  //   const sums = [];
  //   sums[0] = "合计";
  //   let sum_chargePeople: number = 0;
  //   let sum_chargeMoney: number = 0;
  //   // for (let i = 0; i < this.showList.length; i++) {
  //   //   let model: ChargeModel = this.showList[i];
  //   //   sum_chargePeople += model.chargePeople;
  //   //   sum_chargeMoney += model.chargeMoney;
  //   // }
  //   sums[1] = sum_chargePeople;
  //   sums[2] = sum_chargeMoney;
  //   return sums;
  // }
</script>
    
<style scoped lang="scss">
.header {
  display: flex;
  padding: 16px 16px 0 16px;
  margin-bottom: 16px;
  border-radius: 4px;
  background: white;
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);

  .search-form {
    flex: 1;

    ::v-deep {
      .el-input--default {
        width: 200px;
      }
    }
  }

  .search {
    flex-shrink: 0;
    white-space: nowrap;
  }
}
</style>
    